<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 - 首页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f7fa;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .logo {
            font-size: 20px;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .container {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .sidebar {
            width: 250px;
            background: white;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            overflow-y: auto;
        }

        .menu-item {
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        .menu-item:hover {
            background: #f8f9fa;
        }

        .menu-item.active {
            background: #e3f2fd;
            border-left: 3px solid #2196f3;
            color: #2196f3;
        }

        .menu-item i {
            width: 20px;
            text-align: center;
        }

        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .dashboard-header {
            margin-bottom: 30px;
        }

        .dashboard-header h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .stat-info h3 {
            color: #666;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .stat-info p {
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .card-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-header h2 {
            color: #333;
            font-size: 18px;
        }

        .card-body {
            padding: 20px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #2196f3;
            color: white;
        }

        .btn-primary:hover {
            background: #1976d2;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background: #f8f9fa;
            font-weight: 600;
            color: #666;
        }

        tr:hover {
            background: #f8f9fa;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-active {
            background: #e8f5e9;
            color: #4caf50;
        }

        .status-inactive {
            background: #ffebee;
            color: #f44336;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: white;
            border-radius: 10px;
            width: 500px;
            max-width: 90%;
            max-height: 90%;
            overflow-y: auto;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            color: #333;
        }

        .close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }

        .modal-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <i class="fas fa-cogs"></i> 管理系统
    </div>
    <div class="user-info">
        <div class="user-avatar" id="userAvatar">A</div>
        <div id="userName">管理员</div>
        <button class="btn btn-secondary" onclick="logout()">
            <i class="fas fa-sign-out-alt"></i> 退出
        </button>
    </div>
</div>

<div class="container">
    <div class="sidebar">
        <div class="menu-item active" onclick="showDashboard()">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="menu-item" onclick="showUsers()">
            <i class="fas fa-users"></i>
            <span>用户管理</span>
        </div>
        <div class="menu-item" onclick="showWithdrawAccounts()">
            <i class="fas fa-wallet"></i>
            <span>提现账户</span>
        </div>
        <div class="menu-item" onclick="showWithdrawRecords()">
            <i class="fas fa-file-invoice-dollar"></i>
            <span>提现记录</span>
        </div>
        <div class="menu-item" onclick="showMenus()">
            <i class="fas fa-bars"></i>
            <span>菜单管理</span>
        </div>
        <div class="menu-item" onclick="showRoles()">
            <i class="fas fa-user-tag"></i>
            <span>角色管理</span>
        </div>
        <div class="menu-item" onclick="showCreateAdmin()">
            <i class="fas fa-user-plus"></i>
            <span>创建管理员</span>
        </div>
    </div>

    <div class="content" id="mainContent">
        <!-- 内容将通过JavaScript动态加载 -->
    </div>
</div>

<!-- 创建管理员模态框 -->
<div id="createAdminModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>创建管理员账户</h3>
            <button class="close" onclick="closeModal('createAdminModal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="adminCreateForm">
                <div class="form-group">
                    <label for="adminUsername">用户名</label>
                    <input type="text" id="adminUsername" required>
                </div>
                <div class="form-group">
                    <label for="adminPassword">密码</label>
                    <input type="password" id="adminPassword" required>
                </div>
                <div class="form-group">
                    <label for="adminConfirmPassword">确认密码</label>
                    <input type="password" id="adminConfirmPassword" required>
                </div>
                <div class="form-group">
                    <label for="adminNickname">昵称</label>
                    <input type="text" id="adminNickname" required>
                </div>
                <div class="form-group">
                    <label for="adminEmail">邮箱</label>
                    <input type="email" id="adminEmail">
                </div>
                <div class="form-group">
                    <label for="adminMobile">手机号</label>
                    <input type="tel" id="adminMobile">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('createAdminModal')">取消</button>
            <button class="btn btn-primary" onclick="createAdmin()">创建</button>
        </div>
    </div>
</div>

<script>
    // 全局变量
    let currentUser = null;
    const token = localStorage.getItem('token');

    // 页面加载时检查登录状态
    document.addEventListener('DOMContentLoaded', function() {
        if (!token) {
            window.location.href = 'login.html';
            return;
        }

        // 获取用户信息
        const userStr = localStorage.getItem('user');
        if (userStr) {
            currentUser = JSON.parse(userStr);
            document.getElementById('userName').textContent = currentUser.nickname || currentUser.username;
            document.getElementById('userAvatar').textContent = (currentUser.nickname || currentUser.username).charAt(0).toUpperCase();
        }

        // 显示默认内容
        showDashboard();
    });

    // 退出登录
    function logout() {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        window.location.href = 'login.html';
    }

    // 显示仪表板
    function showDashboard() {
        setActiveMenuItem(0);
        const content = `
                <div class="dashboard-header">
                    <h1>系统概览</h1>
                    <p>欢迎回来，${currentUser ? (currentUser.nickname || currentUser.username) : '管理员'}！</p>
                </div>

                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #e3f2fd; color: #2196f3;">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3>总用户数</h3>
                            <p id="totalUsers">-</p>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon" style="background: #e8f5e9; color: #4caf50;">
                            <i class="fas fa-wallet"></i>
                        </div>
                        <div class="stat-info">
                            <h3>提现账户</h3>
                            <p id="totalAccounts">-</p>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon" style="background: #fff3e0; color: #ff9800;">
                            <i class="fas fa-file-invoice-dollar"></i>
                        </div>
                        <div class="stat-info">
                            <h3>待处理提现</h3>
                            <p id="pendingWithdrawals">-</p>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon" style="background: #fce4ec; color: #e91e63;">
                            <i class="fas fa-user-tag"></i>
                        </div>
                        <div class="stat-info">
                            <h3>角色数量</h3>
                            <p id="totalRoles">-</p>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>最近活动</h2>
                    </div>
                    <div class="card-body">
                        <p>系统运行正常，暂无异常活动。</p>
                    </div>
                </div>
            `;

        document.getElementById('mainContent').innerHTML = content;

        // 加载统计数据
        loadDashboardStats();
    }

    // 加载仪表板统计数据
    function loadDashboardStats() {
        // 这里应该调用API获取真实数据
        document.getElementById('totalUsers').textContent = '1,234';
        document.getElementById('totalAccounts').textContent = '856';
        document.getElementById('pendingWithdrawals').textContent = '12';
        document.getElementById('totalRoles').textContent = '5';
    }

    // 显示用户管理
    function showUsers() {
        setActiveMenuItem(1);
        const content = `
                <div class="card">
                    <div class="card-header">
                        <h2>用户管理</h2>
                        <div>
                            <input type="text" placeholder="搜索用户..." style="padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
                        </div>
                    </div>
                    <div class="card-body">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>昵称</th>
                                    <th>邮箱</th>
                                    <th>手机号</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>admin</td>
                                    <td>系统管理员</td>
                                    <td>admin@example.com</td>
                                    <td>13800138000</td>
                                    <td><span class="status-badge status-active">启用</span></td>
                                    <td>
                                        <button class="btn btn-primary" style="padding: 4px 8px; font-size: 12px;">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>user1</td>
                                    <td>普通用户</td>
                                    <td>user1@example.com</td>
                                    <td>13800138001</td>
                                    <td><span class="status-badge status-active">启用</span></td>
                                    <td>
                                        <button class="btn btn-primary" style="padding: 4px 8px; font-size: 12px;">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

        document.getElementById('mainContent').innerHTML = content;
    }

    // 显示提现账户
    function showWithdrawAccounts() {
        setActiveMenuItem(2);
        const content = `
                <div class="card">
                    <div class="card-header">
                        <h2>提现账户管理</h2>
                        <div>
                            <input type="text" placeholder="搜索账户..." style="padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
                        </div>
                    </div>
                    <div class="card-body">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户ID</th>
                                    <th>账户类型</th>
                                    <th>账户信息</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>1001</td>
                                    <td>支付宝</td>
                                    <td>138****8000</td>
                                    <td><span class="status-badge status-active">启用</span></td>
                                    <td>2023-01-01</td>
                                    <td>
                                        <button class="btn btn-primary" style="padding: 4px 8px; font-size: 12px;">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

        document.getElementById('mainContent').innerHTML = content;
    }

    // 显示提现记录
    function showWithdrawRecords() {
        setActiveMenuItem(3);
        const content = `
                <div class="card">
                    <div class="card-header">
                        <h2>提现记录</h2>
                        <div>
                            <select style="padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
                                <option>全部状态</option>
                                <option>待处理</option>
                                <option>已处理</option>
                                <option>已拒绝</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户ID</th>
                                    <th>金额</th>
                                    <th>账户信息</th>
                                    <th>状态</th>
                                    <th>申请时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>1001</td>
                                    <td>¥100.00</td>
                                    <td>支付宝(138****8000)</td>
                                    <td><span class="status-badge status-active">待处理</span></td>
                                    <td>2023-01-01 10:00</td>
                                    <td>
                                        <button class="btn btn-primary" style="padding: 4px 8px; font-size: 12px;">处理</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

        document.getElementById('mainContent').innerHTML = content;
    }

    // 显示菜单管理
    function showMenus() {
        setActiveMenuItem(4);
        const content = `
                <div class="card">
                    <div class="card-header">
                        <h2>菜单管理</h2>
                        <button class="btn btn-primary" onclick="addMenu()">
                            <i class="fas fa-plus"></i> 添加菜单
                        </button>
                    </div>
                    <div class="card-body">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>菜单名称</th>
                                    <th>路径</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>排序</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>系统管理</td>
                                    <td>/system</td>
                                    <td>目录</td>
                                    <td><span class="status-badge status-active">启用</span></td>
                                    <td>1</td>
                                    <td>
                                        <button class="btn btn-primary" style="padding: 4px 8px; font-size: 12px;">编辑</button>
                                        <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px; background: #dc3545;">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

        document.getElementById('mainContent').innerHTML = content;
    }

    // 显示角色管理
    function showRoles() {
        setActiveMenuItem(5);
        const content = `
                <div class="card">
                    <div class="card-header">
                        <h2>角色管理</h2>
                        <button class="btn btn-primary" onclick="addRole()">
                            <i class="fas fa-plus"></i> 添加角色
                        </button>
                    </div>
                    <div class="card-body">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>角色名称</th>
                                    <th>权限标识</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>管理员</td>
                                    <td>admin</td>
                                    <td><span class="status-badge status-active">启用</span></td>
                                    <td>2023-01-01</td>
                                    <td>
                                        <button class="btn btn-primary" style="padding: 4px 8px; font-size: 12px;">编辑</button>
                                        <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px; background: #6c757d;">权限</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

        document.getElementById('mainContent').innerHTML = content;
    }

    // 显示创建管理员页面
    function showCreateAdmin() {
        setActiveMenuItem(6);
        openModal('createAdminModal');
    }

    // 设置激活菜单项
    function setActiveMenuItem(index) {
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach((item, i) => {
            if (i === index) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }

    // 打开模态框
    function openModal(modalId) {
        document.getElementById(modalId).style.display = 'flex';
    }

    // 关闭模态框
    function closeModal(modalId) {
        document.getElementById(modalId).style.display = 'none';
    }

    // 创建管理员
    function createAdmin() {
        const username = document.getElementById('adminUsername').value;
        const password = document.getElementById('adminPassword').value;
        const confirmPassword = document.getElementById('adminConfirmPassword').value;
        const nickname = document.getElementById('adminNickname').value;
        const email = document.getElementById('adminEmail').value;
        const mobile = document.getElementById('adminMobile').value;

        // 验证表单
        if (!username || !password || !nickname) {
            alert('请填写必填字段');
            return;
        }

        if (password !== confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }

        // 发送创建请求
        fetch('/swb-api/api/admin/admins', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + token
            },
            body: JSON.stringify({
                username,
                password,
                nickname,
                email,
                mobile
            })
        })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text) });
                }
                return response.text();
            })
            .then(data => {
                alert('管理员账户创建成功');
                closeModal('createAdminModal');
                // 清空表单
                document.getElementById('adminCreateForm').reset();
            })
            .catch(error => {
                alert('创建失败: ' + error.message);
            });
    }

    // 点击模态框外部关闭
    window.onclick = function(event) {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
        }
    }
</script>
</body>
</html>
